<template>
  <div>
    <div class="row-header">
      <el-form>
        <el-row>
          <el-col :md='6' :lg='6' :xl='4'>
            <el-form-item label="卡来源" label-width="80px">
              <el-select size="small" v-model="dictStatusSearch" style="width: 95%;" placeholder="全部">
                <el-option v-for="dictStatus in dictStatusSelect" :key="dictStatus.value" :label="dictStatus.label"
                           :value="dictStatus.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :md='6' :lg='6' :xl='4'>
            <el-form-item label="一级代理" label-width="80px">
              <el-select size="small" v-model="dictStatusSearch" style="width: 95%;" placeholder="全部">
                <el-option v-for="dictStatus in dictStatusSelect" :key="dictStatus.value" :label="dictStatus.label"
                           :value="dictStatus.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :md='6' :lg='6' :xl='4'>
            <el-form-item label="二级代理" label-width="80px">
              <el-select size="small" v-model="dictStatusSearch" style="width: 95%;" placeholder="全部">
                <el-option v-for="dictStatus in dictStatusSelect" :key="dictStatus.value" :label="dictStatus.label"
                           :value="dictStatus.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :md='6' :lg='6' :xl='4'>
            <el-form-item label="三级代理" label-width="80px">
              <el-select size="small" v-model="dictStatusSearch" style="width: 95%;" placeholder="全部">
                <el-option v-for="dictStatus in dictStatusSelect" :key="dictStatus.value" :label="dictStatus.label"
                           :value="dictStatus.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :md='6' :lg='6' :xl='4'>
            <el-form-item label="客户名称" label-width="80px">
              <el-input size="small" v-model="agentNameSearch" style="width: 95%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :md='6' :lg='6' :xl='4'>
            <el-form-item label="业务号码" label-width="80px">
              <el-input size="small" v-model.trim="agentNameSearch" style="width: 95%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :md='6' :lg='6' :xl='4'>
            <el-form-item label="卡状态" label-width="80px">
              <el-input size="small" v-model="agentNameSearch" style="width: 95%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :md='6' :lg='6' :xl='4'>
            <el-form-item label="所属通道" label-width="80px">
              <el-select size="small" v-model="dictStatusSearch" style="width: 95%;" placeholder="全部">
                <el-option v-for="dictStatus in dictStatusSelect" :key="dictStatus.value" :label="dictStatus.label"
                           :value="dictStatus.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="row-main">
      <el-table :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }" :data="tableData"
                tooltip-effect="dark"
                class='row-main-table' @selection-change="handleSelectionChange" v-loading.fullscreen="tableLoading"
                element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.2)">
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column prop="agentName" label="序号" align="center"></el-table-column>
        <el-table-column prop="dictAgentTypeName" label="卡来源" align="center"></el-table-column>
        <el-table-column prop="dictRealNameName" label="一级代理" align="center"></el-table-column>
        <el-table-column prop="dictStatusName" label="二级代理" align="center"></el-table-column>
        <el-table-column prop="pidName" label="三级代理" align="center"></el-table-column>
        <el-table-column prop="employeeName" label="客户" align="center"></el-table-column>
        <el-table-column prop="alipayName" label="业务号码" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="toEcharts">{{ scope.row.alipayName }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="alipayLoginName" label="是否实名" align="center"></el-table-column>
        <el-table-column prop="phone" label="停卡原因" align="center"></el-table-column>
        <el-table-column prop="cardCount" label="流量池" align="center"></el-table-column>
        <el-table-column prop="cardCount" label="二级流量池" align="center"></el-table-column>
        <el-table-column prop="cardCount" label="本月充值" align="center"></el-table-column>
        <el-table-column prop="cardCount" label="剩余流量" align="center"></el-table-column>
        <el-table-column prop="cardCount" label="本月已用" align="center"></el-table-column>
        <el-table-column prop="cardCount" label="创建时间" align="center"></el-table-column>
        <el-table-column prop="cardCount" label="停卡时间" align="center"></el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" class="row-main-pager"
                     :current-page.sync="currentPage" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                     :total="total" background></el-pagination>
    </div>
  </div>
</template>

<script>
import {userManagement} from '@/api/getData'

export default {
  name: 'Disable',
  data() {
    return {
      options: '',
      pageSize: 10,
      currentPage: 1,
      ascs: [],
      descs: [],
      maxPage: 1,
      tableData: [],
      total: 0,
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData(theKey) {
      this.tableLoading = true;
      const returnData = await userManagement({
        page: {
          current: this.currentPage + '',
          size: this.pageSize + '',
          ascs: this.ascs,
          descs: this.descs
        }
      }, {
        obj: this,
        key: 'tableLoading;' + theKey
      })
      this.tableData = [];
      this.total = 0;
      if (returnData._result) {
        this.total = returnData.data.total
        // 数据回显
        returnData.data.records.map(item => {
          const obj = {}
          obj.id = item.id
          obj.id = item.id
          obj.agentName = item.agentName // 代理名称
          obj.dictAgentTypeName = item.dictAgentTypeName // 代理类型
          obj.dictRealNameName = item.dictRealNameName // 实名类型
          obj.dictStatusName = item.dictStatusName // 用户状态
          obj.pidName = item.pidName // 所属关系
          obj.employeeName = item.employeeName // 业务员
          obj.telephone = item.telephone // 代理联系电话
          obj.alipayName = item.alipayName // 支付宝户名
          obj.alipayLoginName = item.alipayLoginName // 支付宝账号
          obj.cardCount = item.cardCount // 拥有卡数
          obj.balance = item.balance // 余额
          obj.insertTimeDate = item.insertTimeDate // 创建时间
          this.tableData.push(obj)
        })

      }
      this.tableLoading = false
    },
    toEcharts() {
      this.$router.push({path: '/user/echarts'})
    },
    handleSizeChange(val){
      this.pageSize = 10;
      this.currentPage = 1;
      this.initData();
    },
    handleCurrentChange(val){
      this.currentPage = val;
      this.initData();
    },
  }
}
</script>

<style scoped lang="scss">

.el-popper[x-placement^=top] {
  box-shadow: 0px 0px 10px #888888;
  margin-left: 6px;
  margin-right: -39px;

  button {
    display: block;
  }

  .operation {
    border: 0;
    outline: none;
    display: block;
    text-align: center;
    margin: 0;
  }
}
</style>
